<template>
   <!-- 底部导航100 -->
   <view class="tabbar">
     <view class="tabbar-item" v-for="item,index in list" :key="index" @touchstart="switchTabbar(item.pagePath)">
		<uni-badge class="uni-badge-left-margin" text="30" :is-dot="true" absolute="rightTop" size="small">
			<text class="iconfont" :class="[item.icon,{active:(current-1==index)}]"></text>
		</uni-badge>
		<text class="tabbar-text">{{item.text}}</text>  
	 </view>
   </view>
</template>

<script setup>
	import UniBadge from '@/components/uni-badge/uni-badge.vue'
	const props = defineProps({
		current:{
			type:Number,
			default:1
		}
	})
	uni.hideTabBar()
	const list = [{
				"pagePath": "pages/session/session",
				"text": "会话",
				"icon":"icon-xiaoxi-zhihui"
				
			},
			{
				"pagePath": "pages/addressBook/addressBook",
				"text": "通讯录",
				icon:"icon-tongxunlu",
			},
			{
				"pagePath": "pages/find/find",
				"text": "发现",
				icon:"icon-faxian",
			},
			{
				"pagePath": "pages/my/my",
				"text": "我的",
				icon:"icon-wode"
			}]
	/**
	 * 切换路由
	 */
	function switchTabbar(url){
		uni.switchTab({
			url:'/'+url
		})
	}
	
</script>

<style scoped lang="scss">
   .tabbar{
	   position: fixed;
	   height: 100upx;
	   width: 100%;
	   border-top: 1upx solid #ccc;
	   background-color: #fff;
	   display: flex;
	   align-items: center;
	   justify-content: space-evenly;
	   bottom: 0;
	   &-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 4upx;
	   }
	   &-text{
		   font-size: 16upx;
	   }
	   .iconfont{
		   font-size: 40upx;
		   &.active{
			   color:blue;
		   }
	   }
   }
</style>
